import React, { PureComponent,Fragment } from "react";
import { connect } from "dva";
import Link from 'umi/link';
import moment from "moment";
import { Row, Col, Spin, Card } from "antd";
import Upload from "../../../components/Upload";
import DescriptionList from '../../../components/DescriptionList';
import styles from '../../Pbulic.less';

const { Description } = DescriptionList;

@connect(({equipment_integrated,global }) => ({
  dictionaries:global.dictionaries,
  baseUrl:global.baseUrl,
  detaildata:equipment_integrated.detaildata,
  loading:equipment_integrated.loading.detailinfo,
}))


export default  class DetailInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.detailInfoId = this.props.match.params.id && this.props.match.params.id!='detail' ? this.props.match.params.id : 0;
  }

  componentDidMount() {
    this.getData(this.props);
  }


  componentWillReceiveProps(nextProps) {
      if (nextProps.match.params.id && nextProps.match.params.id !== this.props.match.params.id) {
         this.getData(nextProps);
      }
  }

  getData =(props) => {
    const { dispatch} = props;
    dispatch({
      type: "equipment_integrated/fetch_equipment_info",
      payload: {
        devId: this.detailInfoId
      }
    });

  }



  render() {
    const { detaildata,loading, dictionaries, baseUrl } = this.props;

    // console.log('this.props',this.props)


    const deviceStatus = dictionaries.deviceStatus && dictionaries.deviceStatus.length>0
      ? dictionaries.deviceStatus.map(item=>item.label)
      :[];

    const deviceType = dictionaries.deviceType && dictionaries.deviceType.length>0
      ? dictionaries.deviceType.map(item=>item.label)
      :[];

    const deviceLife = dictionaries.deviceLife && dictionaries.deviceLife.length>0
      ? dictionaries.deviceLife.map(item=>item.label)
      :[];


    return (
      <Fragment>
        {loading && <div className={"globalSpin"}><Spin spinning={loading}  /></div>}
        {
          !loading && detaildata && detaildata.devId &&
          <Card >
            <Row gutter={24}>
              <Col span={4}  className={styles.detail_info_pic}>
                {
                  detaildata.devPhoto && detaildata.devPhoto.url &&
                  <Upload
                    listType="picture-card"
                    fileList={[{uid:1,url:`${baseUrl}${detaildata.devPhoto.url}`}]}
                    disabled={true}

                  />
                }
                {
                  (!detaildata.devPhoto || !detaildata.devPhoto.url) &&
                  <div className={styles.no_pic} > 暂无图片 </div>
                }
              </Col>
              <Col span={20}>
                <DescriptionList size="large" style={{ marginTop: 10 }}>
                  <Description term="设备名称">{detaildata.devName}</Description>
                  <Description term="设备类型">{detaildata.devType && deviceType[parseInt(detaildata.devType)-1]}</Description>
                  <Description term="型号">{detaildata.devModel}</Description>
                  <Description term="参数">{detaildata.devParam}</Description>
                  <Description term="品牌">{detaildata.trademark}</Description>
                  <Description term="供货商">{detaildata.supplier}</Description>
                  <Description term="启用日期">{detaildata.enableDate && moment(detaildata.enableDate).format("YYYY-MM-DD HH:mm")}</Description>

                  <Description term="保养周期">{detaildata.maintainPeriod}</Description>
                  <Description term="设备寿命">{detaildata.devLife && deviceLife[parseInt(detaildata.devLife)-1]}</Description>
                  <Description term="设备编号">{detaildata.devCode}</Description>
                  <Description term="外部编号">{detaildata.externalCode}</Description>
                  <Description term="RFID编码">{detaildata.rfidCode}</Description>
                  <Description term="维保单位">{detaildata.maintenanceName}</Description>
                  <Description term="维保联系人">{detaildata.linkman}</Description>
                  <Description term="维保电话">{detaildata.phone}</Description>
                  <Description term="设备管理员">{detaildata.adminUserName}</Description>

                  <Description term="实时状态">{detaildata.status && deviceStatus[parseInt(detaildata.status)-1]}</Description>
                  <Description term="备注">{detaildata.remarks}</Description>
                  <Description term="设备资料" >{
                    detaildata.devDatum && detaildata.devDatum.length>0 &&
                    <Upload
                      disabled={true}
                      defaultFileList={detaildata.devDatum.map(item=>{
                        item.url = baseUrl+item.url;
                        return item;
                      })}
                    />
                  }</Description>
                </DescriptionList>

                <DescriptionList size="large" col={1} style={{ marginTop: 18 }}>
                  <Description term="安装点位">{detaildata.districtName} {detaildata.pointName}</Description>
                  <Description term="关联设备">
                    {
                      detaildata.assodev && detaildata.assodev.length>0 &&
                      <DescriptionList size="large" >
                        {
                          detaildata.assodev.map(item=>{
                            return <Description key={item.devId}><Link to={`/equipment/device/${item.devId}/info`}>{item.devName}</Link></Description>
                          })
                        }
                      </DescriptionList>
                    }
                  </Description>
                  <Description term="附属备件">
                    {
                      detaildata.deviceAttachment && detaildata.deviceAttachment.length>0 &&
                      <DescriptionList size="large" >
                        {
                          detaildata.deviceAttachment.map(item=>{
                            return <Description key={item.id}><Link to={`/equipment/spares/${item.id}/info`}>{item.attaName}</Link></Description>
                          })
                        }
                      </DescriptionList>
                    }
                  </Description>
                  <Description term="所在养护线路">
                    {
                      detaildata.maintainLine && detaildata.maintainLine.length>0 &&
                      <DescriptionList size="large" >
                        {
                          detaildata.maintainLine && detaildata.maintainLine.length>0 && detaildata.maintainLine.map(item=>{
                            return item && <Description key={item.lineId}><Link to={`/maintain/route/${item.lineId}/info`}>{item.lineName}</Link></Description>
                          })
                        }
                      </DescriptionList>
                    }
                  </Description>
                </DescriptionList>

              </Col>
            </Row>
          </Card>
        }
      </Fragment>
    );
  }
}
